	<div class="widget crashoveral">
		<div class="widget-header">
			<div class="left">
				<div class="title">{{page-title}}</div>
			</div>
			{{> date-selector }}
		</div>
        <div class="widget-content">
            <div id="big-numbers-container" class="dashboard">
                {{#each usage}}
                <div class="big-numbers top four-column help-zone-vs" data-help-localize="{{this.help}}">
                    <div class="inner">
                        <div class="number">
                            <span class="value">{{getShortNumber this.data.total}}</span>
                            {{#if this.data.isEstimate}}
                                <span id="total-user-estimate-ind"><i class="fa fa-asterisk"></i></span>
                            {{/if}}
                        </div>
                        <div class="title">{{this.title}}</div>
                        <div class="trend {{this.data.trend}}">
                            {{#ifCond this.data.change "==" "NA"}}
                            <i class="material-icons">trending_flat</i>
                            {{else}}
                                {{#ifCond this.data.change "==" "0%"}}
                                <i class="material-icons">trending_flat</i>
                                {{else}}
                                    {{#ifCond this.data.trend "==" "u"}}
                                    <i class="material-icons">trending_up</i>
                                    {{else}}
                                    <i class="material-icons">trending_down</i>
                                    {{/ifCond}}
                                {{/ifCond}}
                            {{/ifCond}}
                            <div class="change">{{this.data.change}}</div>
                        </div>
                        <div class="select" id="{{this.id}}"></div>
                    </div>
                </div>
                {{/each}}
            </div>
        </div>
		<div class="widget-footer help-zone-vb" data-help-localize="{{{chart-helper}}}" style="height:300px; padding-top:20px; padding-bottom:10px;">
             <div id="graph-note">
                <div class="main">
                    Notes
                    <div class="tail"></div>
                </div>
            </div>
            <div id="dashboard-graph" class="graph" style="height:100%; margin-left:-10px;"></div>
		</div>
	</div>

    <div class="widget-group">
        {{#if big-numbers}}
        <div id="big-numbers-container" class='crash-big-numbers crash-style crash-widgets'>
            {{#each big-numbers.items}}
                {{#if ../loss}}
            <div class="big-numbers top widgets five-column help-zone-vs" data-help-localize="{{this.help}}">
                {{else}}
            <div class="big-numbers top widgets four-column help-zone-vs" data-help-localize="{{this.help}}">
                {{/if}}
                <div class="inner">
                    <div class="title">{{this.title}}</div>
                    <div class="number">
                        <span class="value">{{getShortNumber this.total}}</span>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
        {{/if}}

        {{#if bars}}
        <div class="dashboard-summary four crash-widgets">
            {{#each bars}}
            <div class="item light help-zone-vs" data-help-localize="{{this.help}}">
                <div class="inner">
                    <div class="title">{{this.title}}</div>
                    {{#if this.data}}
                    <div class="bar">
                        {{#each this.data}}
                            <div class="bar-inner" style="width:{{this.percent}}%;" data-item="{{this.name}}"></div>
                        {{/each}}
                    </div>
                    <div class="number" data-item="{{this.data.0.name}}">{{this.data.0.name}}</div>
                    {{else}}
                    <div class="no-data" data-localize="common.bar.no-data">{{../../no-data}}</div>
                    {{/if}}
                </div>
            </div>
            {{/each}}
        </div>
        {{/if}}
    </div>

	<div class="widget" style="margin-bottom: 0">
		<div class="widget-header">
			<div class="left">
				<div style="overflow: auto">
                    <div class="title small">{{page-title}}</div>
                </div>
                <div class="cly-select float filter-segmentation">
                    <div class="select-inner">
                        <div class="text-container">
                            <div class="text">{{active-filter}}</div>
                        </div>
                        <div class="right combo"></div>
                    </div>
                    <div class="select-items square" style="width:150px;">
                        <div>
                            <div class="segmentation-option item" data-value="crash-all" data-localize="crashes.all"></div>
                            <div class="segmentation-option item" data-value="crash-resolved" data-localize="crashes.resolved"></div>
                            <div class="segmentation-option item" data-value="crash-unresolved" data-localize="crashes.unresolved"></div>
                            <div class="segmentation-option item" data-value="crash-new" data-localize="crashes.new"></div>
                            <div class="segmentation-option item" data-value="crash-viewed" data-localize="crashes.viewed"></div>
                            <div class="segmentation-option item" data-value="crash-reoccurred" data-localize="crashes.renew-crashes"></div>
                            <div class="segmentation-option item" data-value="crash-fatal" data-localize="crashes.fatal"></div>
                            <div class="segmentation-option item" data-value="crash-nonfatal" data-localize="crashes.nonfatal"></div>
                            <div class="segmentation-option item" data-value="crash-hidden" data-localize="crashes.hidden"></div>
                        </div>
                    </div>
                </div>
			</div>
            <div class="cly-select float-right green action-segmentation disabled">
                <div class="select-inner">
                    <div class="text-container">
                        <div class="text">{{active-action}}</div>
                    </div>
                    <div class="right combo"></div>
                </div>
                <div class="select-items square" style="width:150px;">
                    <div>
                        <div class="segmentation-option item" data-value="crash-resolve" data-localize="crashes.action-resolved"></div>
                        <div class="segmentation-option item" data-value="crash-unresolve" data-localize="crashes.action-unresolved"></div>
                        <div class="segmentation-option item" data-value="crash-view" data-localize="crashes.action-view"></div>
                        <div class="segmentation-option item" data-value="crash-hide" data-localize="crashes.action-hide"></div>
                        <div class="segmentation-option item" data-value="crash-show" data-localize="crashes.action-show"></div>
                        <div class="segmentation-option item" data-value="crash-delete" data-localize="crashes.action-delete"></div>
                    </div>
                </div>
            </div>
            <div style="display: none">
                <div id="action-segmentation-tooltip" data-localize="crashes.action-disabled-tooltip"></div>
            </div>
		</div>
        <div id="view-filter" class="crash-filter">
            <div class="filter-view-container centered">
            {{#if hasDrill}}
            {{> filter-view }}
            {{/if}}
            </div>
            <div id="toggle-filter" style="padding:10px; cursor:pointer; position:relative;">
                <div id="current-filter" style="display:none; font-family:Ubuntu; font-size:17px; text-align:center; color:#999;">
                    <div class="text" style="text-align:left;"></div>
                    <div class="bar-wrapper">
                        <div class="bar-values"></div>
                        <div class="bar">
                            <span>0%</span>
                            <div class="bar-inner"></div>
                        </div>
                    </div>
                    <div id="remove-filter" style="position: absolute; right: 10px; top: 5px; font-size: 25px;"><i class="icon fa fa-remove"></i></div>
                </div>
                <div id="no-filter" style="font-family:Ubuntu; font-size:17px; text-align:center; color:#999;">
                    <span class="logo fa fa-sort-amount-desc" style="color:#86BB64;"></span>
                    <span data-localize="drill.apply-filter">Apply Filter</span>
                </div>
            </div>
        </div>
	</div>
	<div class="crashes" data-help-localize="{{{chart-helper}}}">
		<table id="crash-table" class="d-table help-zone-vb crash-filter" cellpadding="0" cellspacing="0" data-help-localize="{{{table-helper}}}"></table>
	</div>